<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
	
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">梦聊</h1>
	</header>
	
	<div class="mui-content">
		<form id="form" class="mui-input-group">
		    <div class="mui-input-row">
		        <label>账号</label>
		    <input type="text" id="username" name="username" class="mui-input-clear" placeholder="请输入账号">
		    </div>
		    <div class="mui-input-row">
		        <label>密码</label>
		        <input type="password" id="password" name="password" class="mui-input-password" placeholder="请输入密码">
		    </div>
		    <div class="mui-button-row">
		        <button type="submit" class="mui-btn mui-btn-primary" >登录</button>
		    </div>
		</form>
	</div>
	
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" charset="utf-8">
	  	mui.init();
		
		mui.plusReady(function () {
		   var username = document.getElementById("username");
		   var password = document.getElementById("password");
		   var form = document.getElementById("form");
		   
		   form.addEventListener("submit", function(e){
			   
			    // 判断账号是否为空，如果为空则让其获得焦点
				if (util.isEmpty(username.value)) {
					username.focus();
					mui.toast("请输入账号");
					return false;
				}
				// 判断账号的长度，进行限制
				if (username.value.length > 12) {
					mui.toast("账号长度不能超过12位");
					return false;
				}
				// 判断密码是否为空，如果为空则让其获得焦点
				if(util.isEmpty(password.value)) {
					password.focus();
					mui.toast("请输入密码");
					return false;
				}
				// 判断密码的长度，进行限制
				if (password.value.length > 12) {
					mui.toast("密码不能超过12位");
					return false;
				}
			
				mui.ajax(config.SERVER_URL + 'user/login',{
					data:{
						username: username.value,
						password: password.value
					},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},	              
					success:function(data){
						if(data.success){
							util.saveUser(data.data);
							mui.openWindow({
								url:'main.html',
								id:'main',
								show:{
								      autoShow:true,//页面loaded事件发生后自动显示，默认为true
								      aniShow:"slide-in-right", //页面显示动画，默认为”slide-in-right“；
								      duration:200//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
								    }
							});
						} else {
							mui.alert(data.msg);
						}
					}
				});
				//防止默认时间，防止默认表单提交
				e.preventDefault();
		   });
		   
		});
	</script>
</body>
</html>